
function chooseDisplay(num) {
    let items = document.getElementsByClassName('content-box');
    let nav = document.getElementsByClassName('bottom-nav')[0];
    let nav_child = nav.firstElementChild.children;
    for(let i=0;i<items.length;i++){
        items[i].style.display = 'none';
        nav_child[i].className = ''
    }
    nav_child[num].className = 'active';
    items[num].style.display = 'block';
    setTagName(num);
}

function loadTime(){
    let date = new Date();
    let [month,day,week] = [date.getMonth()+1, date.getDate(),date.getDay()];
    let el = document.getElementsByClassName('top-sub')[0];
    let weekday = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
    if(el){
        el.innerText = `${month}月${day}日 ${weekday[week]}`
    }
}

let lastPositionY = 0;

const RESOLUSION_MAPPING = {
    1200: 32,
    800: 28,
    500: 18,
    400: 16,
    300: 13
};

let nav_title_status = false;
let boundary = 70;

const TAG_NAME_MAPPING = {
    0: null,
    1: '游戏',
    2: 'Apps',
    3: '更新',
    4: '搜索'
};

function setTagName(num){
    let nav = document.getElementsByClassName('top-nav')[0];
    let tag = nav.children[0];
    if(TAG_NAME_MAPPING[num]){
        tag.innerText = TAG_NAME_MAPPING[num];
        setTopNavDisplay(true)
    }else{
        setTopNavDisplay(false, false, false)
    }
}

function setTopNavDisplay(nav_display, border_display, tag_display){
    let nav = document.getElementsByClassName('top-nav')[0];
    let tag = nav.children[0];
    if(nav_display){
        nav.style.visibility = 'visible';
        if(!tag_display){
            tag.style.opacity = '0';
            console.log('Set opa')
        }
    }else{
        nav.style.visibility = 'hidden';
    }
}

function getBoundary(){
    let width = window.innerWidth;
    // 注意遍历的顺序按字符串从小到大排列
    for(let index in RESOLUSION_MAPPING){
        if(RESOLUSION_MAPPING[index]< width && RESOLUSION_MAPPING[index+1]>width){
            boundary = RESOLUSION_MAPPING[index+1];
            break;
        }
    }
}

function setToNavStatus(positionY) {
    let nav = document.getElementsByClassName('top-nav')[0];
    let tag = nav.children[0]
    if(positionY > boundary && tag.style.opacity === '0'){
        tag.style.animation = 'showUp 0.5s forwards';
        nav.style.borderBottom = '1px solid rgb(228, 228, 228)';
        nav_title_status = true;
        console.log('showUp')
    }

    if(positionY < boundary && nav_title_status === true){
        tag.style.animation = 'hidden 0.5s forwards';
        nav.style.borderBottom = 'none';
        nav_title_status = false;
        console.log('hide')
    }
}

getBoundary();

// 每一百毫秒更新 Y轴 位置
setInterval(()=>{
    if(window.pageYOffset !== lastPositionY){
        setToNavStatus(window.pageYOffset);
    }
    lastPositionY = window.pageYOffset;
},500);


loadTime();
setTimeout(chooseDisplay, 100, 0);